<style scoped>
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }



</style>

<template>
    <div class="company" style="height: 900px">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>添加权限</legend>
        </fieldset>

        <form class="layui-form " >
            <input type="hidden" name="type" id="type"/>
            <div class="layui-form-item">
                <label class="layui-form-label" >用户</label>
                <div class="layui-input-inline">
                    <select name="userguid" id="hc_select" lay-filter="hc_select" class="layui-form-select" lay-search lay-verify="required" >
                        <option value="">请选择用户</option>
                        <option v-for="(item, index) in users" :key="item.guid" :value="item.guid">{{item.realname}} ({{item.telphone}})</option>
                    </select>
                </div>
            </div>
<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">用户</label>-->
<!--                <div class="layui-input-block" style="z-index: 10000">-->
<!--                    <input type="text" name="HandoverCompany"   placeholder="请输入客户名称" value="" id="HandoverCompany" class="layui-input" style="position:absolute;width:80%;" lay-verify="required"  onkeyup="search()" autocomplete="off">-->
<!--                    <select type="text" name="userguid"    id="hc_select" lay-filter="hc_select" autocomplete="off"   lay-verify="required" class="layui-select" lay-search>-->
<!--                        <option value="">请输入用户名称</option>-->
<!--                    </select>-->
<!--                </div>-->
<!--            </div>-->

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label" >权限类型</label>-->
<!--                <div class="layui-input-inline">-->
<!--                    <select   id="pdtype"  name="pdtype"  lay-filter="pdtype"   lay-search="">-->
<!--                    </select>-->
<!--                </div>-->
<!--            </div>-->



            <div class="layui-form-item">
                <label class="layui-form-label" >授权范围</label>
                <div class="layui-input-inline">
                    <select id="scopeType"  name="type"  lay-filter="scopeType" class="layui-form-select" lay-search lay-verify="required" >
                        <option value="">请选择授权范围</option>
                        <option v-for="(item, index) in scopeType" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                    </select>
<!--                    <select   id="scopeType"  name="type"  lay-filter="scopeType"   lay-search="">-->
<!--                    </select>-->
                </div>
            </div>


            <div class="layui-form-item" id="depDiv">
                <label class="layui-form-label" >部门</label>
                <div class="layui-input-inline">
                    <select   id="departid"  name="departid"  lay-filter="departid"    lay-search="">
                    </select>
                </div>
            </div>


            <div class="layui-form-item" id="rmDiv">
                <label class="layui-form-label" id="typeAuto">库房</label>
                <div class="layui-input-inline">
                    <select   id="srguid" name="srguid"  style = "height:190px;"  lay-filter="srguid" lay-search="">
                    </select>
                </div>
            </div>


            <div class="layui-form-item" style="height: 0px">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                </div>
            </div>


            <div class="layui-form-item" >
                <label class="layui-form-label">权限</label>
                <div class="layui-input-block" id="percheck" >

                </div>
            </div>

            <div class="layui-form-item" >
                <label class="layui-form-label"> </label>
                <div class="layui-input-block"  >

                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                    <button class="layui-btn layui-btn-primary" @click="$parent.back">返回</button>
                </div>
            </div>

        </form>
    </div>
</template>
<script>
    export default {
        name: 'addSalesPermission',
        data () {
            return {
                permission: [],
                users: [],
                scopeType: [],
                pdtype: [],
            }
        },
        mounted() {
            $('#depDiv').hide();
            $('#rmDiv').hide();

            let that = this;
            layui.use(['form'], function () {
                var form = layui.form, layer = layui.layer;
                that.loadUser();
                form.render();
                form.on('submit(submit)', function (data) {
                    let loader = layer.load();
                    data.field.status=1
                    var permis = new Array();
                    $("input:checkbox[name='permis']:checked").each(function(i){
                        permis[i] = $(this).val();
                    });
                    if(permis.length <= 0){
                        that.toast("请选择权限");
                        layer.close(loader);
                        return false;
                    }
                    data.field.permis=permis;
                    $.ajax({
                        url: '/sales/Salespermission!add.action',
                        data: data.field,
                        type: "post",
                        dataType: "json",
                        success: function(res) {
                            if (res.info == "ok") {
                                that.toast("添加成功");
                                that.$parent.switchPage('SalesPermission');
                            } else {
                                that.toast("系统错误");
                            }
                        },
                        complete: function () {
                            layer.close(loader);
                        }
                    });
                    return false;
                });
            });

        },
        updated() {
            layui.form.render('select');
            layui.form.render();
        },
        methods: {

            //加载用户权限信息
            loadUser:  function (){
                let that = this;
                $.ajax({
                    url: '/sales/Salespermission!findSalseUser.action',
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        if (res != undefined && res.info != undefined) {
                            var data = res.info;
                            that.users = data.users;
                            that.scopeType = data.scopeType;
                            that.pdtype = data.pdtype;
                            // $.each(data.users, function (index, item) {
                            //     $('#hc_select').append(new Option(item.realname + "(" + item.telphone + ")", item.guid));
                            // });
                            // $('#scopeType').append(new Option("请选择" , ""));
                            // $.each(data.scopeType, function (index, item) {
                            //     $('#scopeType').append(new Option(item.dicttext , item.dictkey));
                            // });
                            // $('#pdtype').append(new Option("请选择" , ""));
                            // $.each(data.pdtype, function (index, item) {
                            //     $('#pdtype').append(new Option(item.dicttext , item.dictkey));
                            // });
                            layui.form.render("select");
                        } else {
                            alert("系统错误");
                        }
                    }
                });
            }
        }
    }

    layui.use(['layer', 'jquery', 'form'], function () {
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;
        // form.on('select(pdtype)', function(data){
        //     clearOption("srguid");
        //     clearOption("departid");
        //     $('#percheck').empty();
        // });



        form.on('select(scopeType)', function(data){
            var scopeType = data.value;
            clearOption("srguid");
            clearOption("departid");
            $('#percheck').empty();
            //1-	库房权限 2- 部门权限 3-库房+部门权限 4- 全局权限 5-其他 6-部门(只展示自己的数据)
            if(scopeType == 1){
                $('#depDiv').hide();
                $('#rmDiv').show();
                loadStoreroom();
                $('#departid').attr("lay-verify","");
                $('#srguid').attr("lay-verify","required");

            }else if(scopeType == 2 || scopeType == 6){
                $('#depDiv').show();
                $('#rmDiv').hide();
                loadDepartment();
                $('#departid').attr("lay-verify","required");
                $('#srguid').attr("lay-verify","");
            }else if(scopeType == 3){
                $('#depDiv').show();
                $('#rmDiv').show();
                loadStoreroom();
                loadDepartment();
                $('#departid').attr("lay-verify","required");
                $('#srguid').attr("lay-verify","required");

            }else {
                $('#depDiv').hide();
                $('#rmDiv').hide();
                var getEmnuData = {
                    userguid:$('#hc_select').val(),
                    functiontype:$('#pdtype').val(),
                    type:$('#scopeType').val()
                }
                loadPermission(getEmnuData);
                $('#srguid').attr("lay-verify","");
                $('#departid').attr("lay-verify","");
            }
        });
        form.on('select(departid)', function(data){
            var getEmnuData = {
                userguid:$('#hc_select').val(),
                functiontype:$('#pdtype').val(),
                type:$('#scopeType').val(),
                departid:data.value
             }
            loadPermission(getEmnuData);
        });


        form.on('select(srguid)', function(data){
            var departid = $('#departid').val();
            var getEmnuData = {
                userguid:$('#hc_select').val(),
                type:$('#scopeType').val(),
                functiontype:$('#pdtype').val()
            }
            if(departid =='' ||departid ==null){
                getEmnuData.srguid=data.value;
            }else{
                getEmnuData.srguid=data.value;
                getEmnuData.departid = departid;
            }
            loadPermission(getEmnuData);
           });
        });



    /*
        加载部门信息
     */
    function loadDepartment(){
        layui.use(['form', 'upload', 'layer'], function () {
            var form = layui.form;
            $.ajax({
                url: '/sales/Department!list.action',
                type: "post",
                dataType: "json",
                data:{rows:"999"},
                success: function(res) {
                    if (res.info != undefined && res.info.rows != undefined) {
                        var data = res.info.rows;
                        $('#departid').append(new Option("请选择部门", ""));
                        $.each(data, function (index, item) {
                            $('#departid').append(new Option(item.name, item.guid));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");

                    } else {
                        alert("系统错误");
                    }
                }
            });
        });
    }
    /*
    加载库房信息
     */
    function loadStoreroom(){


        layui.use(['form', 'upload', 'layer'], function () {
            var form = layui.form;
            $.ajax({
                url: '/repository/Storeroom!list.action',
                type: "post",
                dataType: "json",
                data:{rows:"999"},
                success: function(res) {
                    console.log(res);
                    if (res != undefined ) {
                        var data = res.rows;
                        console.log("stroom",data);
                        $('#srguid').append(new Option("请选择库房", ""));
                        $.each(data, function (index, item) {
                            console.log(item)
                            $('#srguid').append(new Option(item.name, item.guid));// 下拉菜单里添加元素
                        });
                        layui.form.render("select");

                    } else {
                        alert("系统错误");
                    }

                }
            });
        });
    }

    /**
     * 清空下拉框选项
     */
    function clearOption(selectName){
        $("#" + selectName).find("option").remove();
    }


    layui.use(['form', 'layedit','upload'], function () {
        var form = layui.form
        form.on('select(hc_select)', function (data) {   //选择移交单位 赋值给input框

            $("#HandoverCompany").val(data.value);
            $("#hc_select").next().find("dl").css({ "display": "none" });
            form.render();
        });

        window.search = function () {
            var value = $("#HandoverCompany").val();
            $("#hc_select").val(value);
            form.render();
            $("#hc_select").next().find("dl").css({ "display": "block" });
            var dl = $("#hc_select").next().find("dl").children();
            var j = -1;
            for (var i = 0; i < dl.length; i++) {
                if (dl[i].innerHTML.indexOf(value) <= -1) {
                    dl[i].style.display = "none";
                    j++;
                }
                if (j == dl.length-1) {
                    $("#hc_select").next().find("dl").css({ "display": "none" });
                }
            }

        }
    });


    function loadPermission(data){
        $("#percheck").empty();
        layui.use(['form', 'upload', 'layer'], function () {
            $.ajax({
                url: '/sales/Salespermission!findSalesPermissionEmnu.action',
                type: "post",
                data:  data,
                dataType: "json",
                success: function(res) {
                    if (res != undefined && res.info != undefined) {
                        var data = res.info;
                        $.each(data, function (index, item) {
                            $('#percheck').append('<input type="checkbox" name="permis" value="'+item.code+'"  title="'+item.name+'" >');
                        });
                        layui.form.render("select");
                        layui.form.render();
                    } else {
                        alert("系统错误");
                    }
                }
            });
        });
        }
</script>
